<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 样式绑定</title>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<div class="active"></div>-->
        <div v-bind:class="{ active: isActive }"></div>
    </div>

    <div id="app1">
        <!--<div class="static active text-danger"></div>-->
        <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
        </div>
    </div>

    <div id="app2">
        <div v-bind:class="classObject"></div>
    </div>

    <div id="app3">
        <div v-bind:class="classObject1"></div>
    </div>

    <div id="app5">
        <!--<div class="active text-danger"></div>-->
        <div v-bind:class="[activeClass, errorClass]"></div>
    </div>


    <div id="app6">
        <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    </div>


    <div id="app7">
        <!--<div style="color: green; font-size: 30px;">菜鸟教程</div>-->
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
    </div>

    <div id="app8">
        <div v-bind:style="styleObject">菜鸟教程</div>
    </div>

    <div id="app9">
        <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        //class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
        // Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true
            }
        });
        //在对象中传入更多属性用来动态切换多个 class
        var app2 = new Vue({
            el: '#app1',
            data: {
                isActive: true,
                hasError: true
            }
        });
        //直接绑定数据里的一个对象
        var app3 = new Vue({
            el: '#app2',
            data: {
                classObject: {
                    active: true,
                    'text-danger': true
                }
            }
        });
        //绑定返回对象的计算属性
        var app4 = new Vue({
            el: '#app3',
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject1: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal',
                    }
                }
            }

        });
        //数组语法
        var app5 = new Vue({
            el:'#app5',
            data:{
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        });
        //三元表达式来切换列表中的 class
        var app6 = new Vue({
            el:'#app6',
            data:{
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        });

        //Vue.js style(内联样式)
        var app7 = new Vue({
            el:'#app7',
            data:{
                activeColor: 'green',
                fontSize: 30
            }
        });
        //直接绑定到一个样式对象，让模板更清晰
        var app8 = new Vue({
            el:'#app7',
            data:{
                styleObject: {
                    color: 'green',
                    fontSize: '30px'
                }
            }
        });
        //使用数组将多个样式对象应用到一个元素上
        var app9 = new Vue({
            el: '#app9',
            data: {
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {
                    'font-weight': 'bold'
                }
            }
        });
        //当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

    </script>
</body>
</html>